<template>
  <!--首页汇总-->
  <div class="contentRight" style="background-color: #f0f2f5;" id="contentRight">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;" id="toprow">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff">
        <a-card size="small" title="安亭基地" :bordered="false">
          <!--可选择基地下拉菜单-->
          <!--<template slot="extra">-->
            <!--<a-dropdown>-->
              <!--<a  class="ant-dropdown-link menuA">-->
                <!--{{antingAreaName}}<a-icon type="down" />-->
              <!--</a>-->
              <!--<a-menu slot="overlay" @click="handleClick">-->
                <!--<a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">-->
                  <!--{{item.areaName}}-->
                <!--</a-menu-item>-->
              <!--</a-menu>-->
            <!--</a-dropdown>-->
          <!--</template>-->
        </a-card>

        <!--地图-->
        <div class="divbox" style="top: 30px;">
          <div class="mapflex flex" style="width: 90%;">
            <div class="baseMapAnting"></div>
          </div>
        </div>
      </a-col>

      <a-col flex="10px"></a-col>
      <!--第一排右侧-->
      <a-col flex="auto" >
        <a-card size="small" title="门禁实时监控" :bordered="false">
          <div style="min-height: 430px">
          <!--照片-->
          <a-row :gutter="10">
            <a-col :span="12">
              <div class="flex4">
                <p>档案照片</p>
                <div class="photoBox flex">
                  <img style="width: 100%;"  src="../../assets/web.jpg" alt="">
                </div>

              </div>
            </a-col>
            <a-col :span="12">
                <div class="flex4">
                  <p>上传拍照</p>
                  <div class="photoBox flex">
                    <!--<img style="width: 100%;"  src="http://dss.schaefflercn.com:9070/static/img/logo.png" alt="">-->
                    <img style="width: 100%;"  src="../../assets/web1.jpg" alt="">
                  </div>
                </div>
            </a-col>
          </a-row>

          <div style="height: 20px"></div>

          <a-descriptions  bordered size="small" :column="2">
            <a-descriptions-item label="姓名">
              {{userInfo.userName}}
            </a-descriptions-item>
            <a-descriptions-item label="工号">
              {{userInfo.userNo}}
            </a-descriptions-item>
            <a-descriptions-item label="部门">
              {{userInfo.deptName}}
            </a-descriptions-item>
            <a-descriptions-item label="刷卡时间">
              {{userInfo.cardTime}}
            </a-descriptions-item>
            <a-descriptions-item label="设备名称">
              {{userInfo.deviceName}}
            </a-descriptions-item>
            <a-descriptions-item label="设备编号">
              {{userInfo.deviceNo}}
            </a-descriptions-item>
          </a-descriptions>

          <a-divider style="margin: 20px 0"/>

          <a-row :gutter="10">
            <a-col :span="12">
              <a-card size="small"  style="text-align: center;">
                <div class="flex">
                  <span class="span-round" style="background-color: #00893d;"></span>
                  <a-statistic
                    title="在线设备"
                    :value="onlineDevice"
                    suffix="台"
                    class="classDevice"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card size="small"  style="text-align: center;">
                <div class="flex">
                  <span class="span-round" style="background-color: #FF0000;"></span>
                  <a-statistic
                    title="离线设备"
                    :value="notOnlineDevice"
                    suffix="台"
                    class="classDevice"
                  >
                  </a-statistic>
                </div>
              </a-card>

            </a-col>
          </a-row>
          </div>
        </a-card>

      </a-col>
    </a-row>

    <!--第二排-->
    <a-row  style="width: 100%">
      <a-col>
        <a-card size="small" title="刷卡记录" :bordered="false">
            <a-table
              class="tabled"
              bordered
              :fixed="true"
              :pagination="false"
              size="small"
              :row-key="record => record.userNo + Math.random()"
              :columns="columns"
              :data-source="tableData"
              :loading="tableLoading"
              :scroll="{ y: yHeight }"
            >
            </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";
import { Chart, registerShape } from '@antv/g2';

export default {
  components: {

  },
  name:'',
  data() {
    return {
      // 右上角人员信息
      userInfo: {
        userName:"张磊",
        userNo:"1231321",
        deptName:"施工部",
        cardTime:"2020-12-12 08:00:00",
        deviceName:"Cloud Database33",
        deviceNo:"Cloud Database33",
      },
      xWidth: "",
      yHeight: "",  //表格自定义高
      tableData: [], //表格数据
      columns: [],   //表格表头
      tableLoading: false,  //表格加载中
      pagination: {
        pageSize: 10,
        current: 1,
        total: 100,
        showSizeChanger: true,
        // showQuickJumper: true,
        pageSizeOptions: ['30', '50', '100'],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          // console.log("1111");
          this.pagination.current = 1;
          this.pagination.pageSize = pageSize;
        },
      },
      loading1: false,
      aningAreaAll:[],
      antingAreaName:"办公区域",
      antingAreaId: "1",
      notOnlineDevice: 10 , //离线设备
      onlineDevice: 800 , //在线设备

      intervalId:null,   //定时器，定时刷新页面
      antingData: [],

      // 银川基地
      yinchuanData: [],
      yinchuanAreaList:[],
      yinchuanAreaName2: "",
      yinchuanAreaId2: "",
      yinchanChart: null,  //银川数据图形对象
    }
  },
  beforeMount(){
    this.columns = [
      {
        title: '序号',     //表头
        dataIndex: 'serialNumber',   //字段名称
        width: '50px',    //设列宽度
        align: 'center',  //居中显示
        className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
        customRender: (value, row, index) => `${(this.pagination.current - 1) * this.pagination.pageSize + index + 1}`  //设置动态序号
      },
      {
        title: '工号',
        dataIndex: 'userNo',
        width: '100px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '姓名',
        dataIndex: 'userLname',
        width: '100px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '部门',
        dataIndex: 'deptName',
        width: 'auto',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '刷卡时间',
        dataIndex: 'swipeTime',
        width: '200px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '设备名称',
        dataIndex: 'deviceName',
        width: 'auto',
        align: 'center',
        className: 'changeBack',
        ellipsis: true,   //此属性可以让单元格内容根据宽度自动省略
      },
      {
        title: '设备编号',
        dataIndex: 'deviceNo',
        width: '150px',
        align: 'center',
        className: 'changeBack'
      },{
        title: '方向',
        dataIndex: 'direction',
        width: '120px',
        align: 'center',
        className: 'changeBack'
      },
      {
        title: '识别方式',
        dataIndex: 'identifyManner',
        width: '120px',
        align: 'center',
        className: 'changeBack'
      },
    ];

    this.tableData = [
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
      {userNo: 234443, userLname: "张三",deptName: "软件部",swipeTime: "2020-12-12 8:00:00",deviceName: "北门1",deviceNo: 822388248322,direction: "进",identifyManner: "刷卡",},
    ];

  },
  created(){
    // this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    let Height = window.innerHeight;
    let toprowHeight = document.getElementById("toprow").offsetHeight;
    this.yHeight = Height - toprowHeight - 105 - 64 - 22;    //有分页的话最后一个减80，没有分页减22
    // this.fristAntingData();
  },
  methods: {
    // 获取基地的区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = res.data.result;
        // console.log(this.aningAreaAll);
      } else {
        this.$message.error(res.data.message);
      }

    },
    // 获取银川基地的区域
    async getYinchuanAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
      // console.log(res.data);
      if (res.data.success){
        this.yinchuanAreaList = res.data.result;
        this.yinchuanAreaName2 = res.data.result[0].areaName;
        this.yinchuanAreaId2 = res.data.result[0].id;
        // console.log(this.yinchuanAreaList);
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.getAllVisitCase(); //加载数据函数
        this.loadDataRegularly();
      }, 20000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    async fristAntingData(){
      this.getAllVisitCase();
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();
    },
    // 安亭基地切换区域
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAntingVisitCase();

    },
    // 银川基地切换区域
    async handleClickYinchuan2(e) {
      // console.log(e);
      this.yinchuanAreaName2 = e.item.value;
      this.yinchuanAreaId2 = e.key;
      await this.getYinchuanVisitCase();

    },
    // 定时加载数据
    async loadDataRegularly() {
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();

    },
    // 请求安亭基地数据
    async getAntingVisitCase() {
      // this.loading = true;
      // console.log(this.antingAreaId);
      let params = {
        visitBaseId : 100,
        visitAreaId: this.antingAreaId
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.antingData = [];

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求银川基地数据
    async getYinchuanVisitCase() {
      let params = {
        visitBaseId : 102,
        visitAreaId: this.yinchuanAreaId2
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.yinchuanData = [];

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求所有基地数据
    async getAllVisitCase() {
      // this.loading = true;
      let params = {
        visitBaseId : "",
        visitAreaId: ""
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      console.log(resp.data.result);
      if (resp.data.success) {

      } else {
        this.$message.error(resp.data.message);
      }
    },





  },
}
</script>
